<template>
  <div class="settings">
	<div class="settings_left">
		<a-menu
		      :default-selected-keys="['1']"
		      mode="inline"
		      @click="handleClick"
		    >
			<a-menu-item key="1">
			  基础设置
			</a-menu-item>
			<a-menu-item key="2">
			  安全设置
			</a-menu-item>
			<a-menu-item key="3">
			  个性化
			</a-menu-item>
			<a-menu-item key="4">
			  账户绑定
			</a-menu-item>
			<a-menu-item key="5">
			  新消息通知
			</a-menu-item>
		</a-menu>
	</div>
	<div class="settings_right">
		<router-view></router-view>
	</div>
  </div>
</template>

<script>
export default {
  name: 'settings',
  data() {
	return {
		setMeun:[
			{'key':'1','path':'/account/settings/base','name':'基础设置'},
			{'key':'2','path':'/account/settings/security','name':'安全设置'},
			{'key':'3','path':'/account/settings/custom','name':'个性化'},
			{'key':'4','path':'/account/settings/binding','name':'账户绑定'},
			{'key':'5','path':'/account/settings/notification','name':'新消息通知'},
		]
	}
  },
  created(){
  	
  },
  mounted() {
	this.$router.push(this.setMeun[0].path)
  },
  methods: {
	handleClick(e) {
		let isbring = this.setMeun.find( t => t.key === e.key)
		this.$router.push(isbring.path)
	}
  }
}
</script>
<style lang="less" scoped>
	.settings{
		margin: 24px;
		padding: 16px 0;
		display: flex;
		background: white;
		.settings_left{
			width: 224px;
		}
		.settings_right{
			padding: 8px 40px;
			width: calc(100% - 224px);
		}
	}
</style>
